@import "../../base/base";
@import "~pofod/base/base";
@prefix:navigation;
@height:80px;
@contentHeight:108px;
.@{prefix}{
  width: 100%;
  min-height: @contentHeight;
  .@{prefix}-best{
    position: fixed;
    z-index: 999;
    width: 100%;
    height: @contentHeight;
    background: #fff;
    border-bottom: 1px solid #eee;
    .max-media(1024px,{
      height: auto;
      position: relative;
    });
    .@{prefix}-number{
      max-width: @box-width;
      .margin-center;
      font-size: 14px;
      line-height: 28px;
      a{
        color:#fff;
        text-decoration: underline;
      }
      .max-media(1200px,{padding:0 20px});
      .@{prefix}-list{
        float: left;
        .mobileStyle;
        a{
          &:nth-child(1){
            margin-right: 20px;
          }
        }
      }
      .@{prefix}-login{
        float: right;
        .mobileStyle;
      }

    }
    .@{prefix}-box{
      max-width: @box-width;
      .margin-center;
      line-height: @height;
      .max-media(1200px,{padding:0 10px});
      .@{prefix}-list{
        float: right;
        .@{prefix}-list-children{
          display: block;
          float: left;
          height: @height;
          line-height: @height;
          font-size: 16px;
          position: relative;
          margin: 0 5px;
          a{
            display: block;
            padding: 0 10px;
            color: #666;
            &:hover{
              background: @base-color;
              color: #fff;
            }
          }
          ul{
            position: absolute;
            left: 50%;
            -webkit-transform: translateX(-50%);
            -moz-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
            -o-transform: translateX(-50%);
            transform: translateX(-50%);
            top:80px;
            width: 200px;
            display: none;
            height: 0px;
            overflow: hidden;
            li{
              height: 50px;
              line-height: 50px;
              background: #fff;
              border-bottom: 1px dashed #ddd;
              text-align: center;
              font-size: 15px;
              &:nth-last-child(1){
                border-bottom: none;
              }
            }
          }
          &:nth-last-child(1){
            margin-right: 0px;
          }
        }
        .hover-exe(0,changeHeight);
        .hover-exe(2,changeHeight);
        .hover-exe(1,solution);
        .hover-exe(3,mayokanbing);
        .hover-exe(4,product-height);
      }
    }
  }
}
.hover-exe(@n,@name){
  .hover-@{n}{
    &:hover{
      ul{
        display: block;
        -webkit-animation: 0.5s @name linear forwards;
        -o-animation: 0.5s @name linear forwards;
        animation: 0.5s @name linear forwards;
      }
    }
  }
}
.keyframes(all,changeHeight,{0% { height: 0px }100% { height: 150px}});
.keyframes(all,mayokanbing,{0% { height: 0px }100% { height: 350px}});
.keyframes(all,product-height,{0% { height: 0px }100% { height: 100px}});
.keyframes(all,solution,{0% { height: 0px }100% { height: 200px}});
.mobileStyle(){
  .max-media(450px,{
    //float: none;
    //margin: 0 auto;
  width: 100%;
  text-align: center;
  })
}

